<template>
    <div>
     <div></div>
     <div>
       <el-button size="mini" type="primary" @click="addCategoryDialog">添加子分类</el-button>
       <el-link type="primary" :underline="false" style="width:10% "  @click="jumpSub">&lt;—返回</el-link>
     </div>
    <div></div>
   <el-row>
   <el-col :span="24" >
     <el-table
         :data="category"
         style="width: 100%">
         <el-table-column
           prop="id"
           label="ID"
           width="180">
         </el-table-column>
         <el-table-column
         
           label="图片"
           width="180">
           <template v-slot="scope3">
                    <img
                    style="width: 100px;  height: 100px"
                    :src= "scope3.row.img"
                    alt=""
                    >
                    <img>
                    </template>
         </el-table-column>
         <el-table-column
           prop="name"
           label="名称">
         </el-table-column>
         <el-table-column
           prop="sort"
           label="排序">
         </el-table-column>
         <el-table-column
           prop="online"
           label="状态">
         </el-table-column>
         <el-table-column
           prop="description"
           label="描述">
         </el-table-column>
         <el-table-column
           prop="handle"
           label="操作">
           <template slot-scope="scope">

           <el-button size="mini" type="danger" @click="delCategoryDialog(scope.row.id)">删除</el-button>
           <el-button size="mini" type="info" @click="editCategoryDialog(scope.row.id)">编辑</el-button>
         </template>
         </el-table-column>
       </el-table>
       <el-pagination
            style="margin-top: 12px"
            background
            layout="prev, pager, next"
            :page-size="5"
            :current-page="current"
            @current-change="goto"
            :total="total"
          >
          </el-pagination>
       <add-subCategory-dialog @refresh="refresh" ref="addDialog"></add-subCategory-dialog>
       <edit-subCategory-dialog @refresh="refresh" ref="editDialog"></edit-subCategory-dialog>
   </el-col>
   
   
   </el-row>
   
    </div>
   </template>
       
   <script>
     import http from '@/utils/request.js'


     import AddSubCategoryDialog from './AddSubCategoryDialog.vue'
     import EditSubCategoryDialog from './EditSubCategoryDialog.vue'
   
   
   
  export default {
    components:{
      AddSubCategoryDialog,
      EditSubCategoryDialog
      // DelDeptDialog
    },
    data() {
      return{
  
        category: [],
        categoryId: 0,
        current: 1,
        total: 0,
        val:0,
        // subs: {},
        page:this.val,
        cpage:0
        
      }
    },

 mounted(){

  // this.showDept();
  this.EditSubCategoryDialog = true;
  // this.showSubDataById();
    // created();
    this.goto();
  },
  methods: {
    goto(val = 1){
      this.showSubDataById(val);
      // this.created()

    },

    showSubDataById(val){
// --------------------------》》》》》
      // 不能用basemapper----默认insert方法！！！，categorId没有值，两个表必须连起来！！
      this.categoryId = JSON.parse(this.$route.query.id);
      // this.categoryId = JSON.parse(this.$route.query.cpage);
      this.page = val
      // this.subs = {page:this.page,categoryId:this.categoryId}
      // this.page = val
      // console.log("this.$route.query.id--->",this.$route.query.subId);
      // console.log("subs--->",this.subs);
       http.post(`/category/sub/x/`,{page:this.page,categoryId:this.categoryId}).then((res)=>{
        this.category = res.data
        this.current = res.page
        this.total = res.total
        console.log("res: -------->",res);
      },)



    },

  showDept(){
    http.get(`/subCategory/getAll`).then((res)=>{
      this.category = res
      console.log("res: -------->",res);
    },)
  },
  jumpSub(){
    this.$router.push({
            path:"/category/categoryList",
            query:{
            	id:this.id,
              page:this.page

              
              
            },
            methods:{



            }
        })
       

  },

  

  async delCategoryDialog(id){
    // this.$refs.delDialog.delDeptDialogVisible = true
    console.log("id的值-------------------》》",id);
    try {
      // 对于this.confirm() 使用 await等待的时候，用户点击取消，是通过抛异常的方式
      await this.$confirm("你确定要删除这条数据吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "success",
      });
      // 代码如果能够走下来表示用户点击了确认按钮
      // 删除用户
      await http.delete(`subCategory/${id}`);
      this.$message({ message: "删除成功", type: "success", duration: 1000 });
      this.refresh();
    } catch (err) {
      // 代码如果进入了 catch块，表示用户点击了取消按钮
      console.log(err);
    }
    // this.showDept();
    
  },

     // 用户点击编辑按钮
     editCategoryDialog(id) {
    console.log("edit---------->id",id);
    this.$refs.editDialog.getById(id);
    // 让编辑模态框展示
    this.$refs.editDialog.editSubCategoryDialogVisible = true
  },
  async addCategoryDialog() {
     this.$refs.addDialog.addCategoryDialogVisible = true
    this.refresh();
    // this.showDept();
  },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    
    refresh(){

      // this.showSubDataById(this.subId)
      this.goto(this.subId)

    }

  
   
  },
  created(){
    console.log("xxx--this.$route.query.id------>",this.$route.query.id);
    console.log("xxx--this.$route.query.page------>",this.$route.query.cpage);
    // subs = {id:this.$route.query.id,page:val}
    // console.log("subs--------->",subs);
    // http.post(`/category/sub/x/`,{id:this.$route.query.id,page:val}).then((res)=>{
    //     this.category = res
    //     console.log("res-category-byid: -------->",res);
    //   },)

  }
}
</script>

<style>

</style>
       